<template>
    <div>
<el-steps :active="active" finish-status="success">
    <el-step title="已下单"></el-step>
    <el-step title="制作中"></el-step>
    <el-step title="已完成"></el-step>
  </el-steps>
  <div style="margin-top: 20px;" v-show="yy">
  <span>共计还有{{ bb.length }}个订单待制作</span>
   <el-descriptions title="订单信息">
    <el-descriptions-item label="订单号">{{bb.length>0? bb[0].Dbh:""}}</el-descriptions-item>
    <el-descriptions-item label="订单编号">{{bb.length>0? bb[0].Pbh:""}}</el-descriptions-item>
     <el-descriptions-item label="下单时间">{{bb.length>0? bb[0].Pdata:""}}</el-descriptions-item> 
    <el-descriptions-item label="商品" >
        
    </el-descriptions-item>
    
    
    <el-descriptions-item  label="下单门店">{{ bb.length>0? bb[0].dizhi:""}}</el-descriptions-item>
</el-descriptions>
<table class="table table-bordered">
                    <thead>
                        

                     </thead>
                    <tbody>
                        <tr v-for="(item,index) in bb.length>0? bb[0].pxq:'' " :key="index">
                       
                            <td style="width: 100px;">{{item.Name}}</td>
                            <td style="width: 50px;">{{item.Shu|zz1}}</td>
                            <td style="width: 50px;">{{item.Price|currency}}</td>
                            <td style="width: 300px;">{{ item.Pl  }}</td>
                           
                            
                        </tr>
                        

                    </tbody>
                </table> 
</div>
<el-empty v-show="yy1" description="暂无订单"></el-empty>
  <el-button v-show="md" style="margin-top: 12px;" @click="next">{{active>2?"下一单":"下一步"}}</el-button>
</div>
</template>
  <script>
  import basepath from '../../plugins/base.js'
  import Plugin from '@/plugins/axios';
  import Vue from 'vue';
  Vue.filter('currency', function(value) {
  if (typeof value !== 'number') {
    return value;
  }
  // 这里以人民币为例，你可以根据需要修改货币符号和格式
  return  value.toFixed(2)+'￥';
});

    export default {
      data() {
        return {
          active: 0,
          bb:[],
          b:0,
         yy:false,
         yy1:false,
         md:false,
          imgbase: '',
         
          bb2:{
            Pbh:'',
            zt:0
          }
        };
      },
    created(){
        this.sj()
        
    },
      methods: {
        next() {
          if(this.bb.length>0){
           if(this.active<3){
          if (this.active++ > 2) this.active = 1;
        
          this.bb2.zt=this.bb2.zt+1
          console.log(this.bb2.zt)
           this.axios({
             method:'PUT',
             url:'Pder/gai',
             data:this.bb2
         }).then(res=>{
            if(res.code==1){
              console.log("成功")
              console.log(this.bb2.zt)
              console.log(this.bb.length)
              if(this.bb.length==1&&this.bb2.zt==4&&this.bb[0].Ptype==1||this.bb.length==1&&this.bb2.zt==3&&this.bb[0].Ptype==2){
              this.active=0;
              this.md=false;
              this.yy=false;
              this.yy1=true;
              this.sj();
             }
              if(this.bb2.zt==3&&this.bb[0].Ptype==2){
              const intervalId = setInterval(() => {	
                this.bb2.zt=this.bb2.zt+1
                this.axios({
             method:'PUT',
             url:'Pder/gai',
             data:this.bb2
         }).then(res=>{
           if(res.code==1){
            console.log("成功")
           }else{
            console.log("失败")
           }
           clearInterval(intervalId);
         })
        
              }, 5000);
             }       
            }
         })
        }else if(this.active==3){        
        this.active=1            
        if(this.bb.length>0){
          this.sj();
        }else{
          this.yy=false;
          this.yy1=true;
          
        }
        
        }
      }else if(this.bb.length==0){
       this.sj()
       const h = this.$createElement;

  this.$notify({
  title: '不准点了',
  message: h('i', { style: 'color: teal'}, '已无更多订单')
    });
      }
        },
        sj(){
         
         this.axios({
             method:'POST',
             url:'Pder/Pdermain',
             data:{}
         }).then(res=>{
             if(res.code>0){
              console.log(res.data)
           
              this.bb=res.data;
              this.bb=this.bb.filter(n=>n.zt<4&&n.Ptype==1||n.zt<3&&n.Ptype==2)
              if(this.bb.length>0){
                this.md=true
                this.yy=true
                this.yy1=false
                this.active=1
                this.bb.sort((a,b)=>a.Dbh-b.Dbh)
                if(this.bb[0].Ptype==1){
                this.bb[0].zt=this.bb[0].zt+1
              }
                this.bb2.zt=this.bb[0].zt
                this.bb2.Pbh=this.bb[0].Pbh
             
              }else{   
                this.md=false             
                this.yy=false
                this.yy1=true
                this.active=0
              } 
               this.b=this.bb.length;
       
              console.log(this.bb)
              

     }else{
       this.$message({ type:'danger', message:res.msg})
     }

         })
      }
    }
    ,filters:{
      zz(value){
        return value+'.00￥'
      },
      zz1(value){
        return 'x'+value
      }
    }
    }
  </script>